<!--设备选择器 可以选择变电站、线路、变压器等各种设备 -->
<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:sdu="http://sduept.com/jsf/cc">
<h:head>
	<title>设备选择器</title>
	<style type="text/css">
.value {
	font-weight: bold;
}

.ui-tree {
	width: 400px;
	position: relative;
	height: 300px;
	overflow-y: scroll;
}

input[type="text"] {
	height: 21px;
}
</style>
</h:head>
<!-- 
使用方法
在页面中
<p:commandButton value="选择设备" icon="ui-icon-extlink" actionListener="#{YourController.chooseEquipment()}">
<p:ajax event="dialogReturn"  listener="#{YourController.onSelectorChosen}" update="YourDataTable" />
</p:commandButton>
在自己的业务controller中 添加如下方法
public void chooseEquipment() {
        Map<String,Object> options = new HashMap<String, Object>();
        options.put("resizable", false);
        options.put("draggable", false);
        options.put("modal", true);
        options.put("width", 600);
        options.put("height", 400);
        //可用的参数stationId，selectedType
        Map<String,List<String>> params = new HashMap<>();
        List<String> selectedTypes = new ArrayList<>();
        pl.add("SubStation");
        params.put("selectedType", selectedTypes);
        RequestContext.getCurrentInstance().openDialog("/ui/common/equipment_selector_single", options, params);
    }
	public void onSelectorChosen(SelectEvent event) {
		//返回的是选择的对象
		//例如SubStation station = (SubStation) event.getObject();
	}
 -->
<h:body>
	<h:form id="toolbarForm">
		<p:toolbar id="toolbar">
			<f:facet name="left">
				<h:selectOneMenu  value="#{equipmentSingleSelectorController.chooseVoltage}" style="height:31px;">
					<p:ajax event="change" listener="#{equipmentSingleSelectorController.changeVoltage}"
						update="deviceForm:tree" />
					<f:selectItem itemLabel="全部" itemValue="0" />
					<f:selectItem itemLabel="220kV" itemValue="220" />
					<f:selectItem itemLabel="500kV及以上" itemValue="500" />
					<f:selectItem itemLabel="800kV及以上" itemValue="800" />
				</h:selectOneMenu>
				<p:autoComplete rendered="#{equipmentSingleSelectorController.stationId == null}" placeholder="输入拼音首字母可查询" value="#{equipmentSingleSelectorController.filter}"
					dropdown="true" completeMethod="#{equipmentSingleSelectorController.completeEquipments}"
					scrollHeight="300" style="margin-left:10px;height:31px;">
					<p:ajax update="deviceForm:tree" event="itemSelect"
						listener="#{equipmentSingleSelectorController.autoCompleteEquipment}" />
				</p:autoComplete>
				<!-- <p:commandButton style="margin-left: 3px;" icon="ui-icon-search" /> -->
				<p:commandButton rendered="#{equipmentSingleSelectorController.stationId == null}" icon="fa fa-refresh" update="deviceForm:tree toolbar" title="清除"
					actionListener="#{equipmentSingleSelectorController.refresh}" style="margin-left:5px;" />
			</f:facet>
			<f:facet name="right">
				<p:commandButton value="确定" ajax="false" style="margin-right: 50px;"
					disabled="#{!equipmentSingleSelectorController.showChooseBtn()}"
					actionListener="#{equipmentSingleSelectorController.selectSingleDialog}" />
			</f:facet>
		</p:toolbar>
	</h:form>
	<h:form id="deviceForm">
		<p:messages id="messages" showDetail="true">
		</p:messages>
		<p:tree value="#{equipmentSingleSelectorController.root}" var="node"
			style="width:600px;border:none" dynamic="true" id="tree" widgetVar="tree" animate="true"
			selectionMode="single" selection="#{equipmentSingleSelectorController.selectedNode}">
			<p:ajax event="expand" update="deviceForm:tree"
				listener="#{equipmentSingleSelectorController.onNodeExpand}" />
			<p:ajax event="select" update="toolbarForm:toolbar"
				listener="#{equipmentSingleSelectorController.onNodeSelect}" />
			<p:treeNode type="1" icon="fa fa-folder-open-o">
				<h:outputText value="#{node}" />
			</p:treeNode>
			<p:treeNode type="Substation" icon="fa fa-home ">
				<h:outputText value="#{node}" />
			</p:treeNode>
			<p:treeNode type="Equipment" icon="fa fa-cc-amex">
				<h:outputText value="#{node}" />
			</p:treeNode>
		</p:tree>
	</h:form>
</h:body>
</html>
